import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Button, Image, ScrollView } from '@tarojs/components';
import './index.scss'
import { queryExaminationConfig } from '@/services/api/xiaoyiAccExam';
import { findMapsByFieldNameAndDictItemName } from '@/services/api/common';
import IconFont from '@/components/iconfont/infont';

class XiaoYiAccExam extends Component {

    config = {
        navigationBarTitleText: ''
    }

    state = {
        navBackGroundColor: 'rgba(255, 0, 0,0)',
        typeDataList: []
    }

    componentWillMount() {
        this.requestData()
    }
    componentDidMount() { }
    componentWillReceiveProps(nextProps, nextContext) { }
    componentWillUnmount() { }


    requestData() {
        const { typeDataList } = this.state
        queryExaminationConfig().then((resp) => {
            if (resp.code === 200) {
                var types = findMapsByFieldNameAndDictItemName('examination_questionnaire_type')
                console.log(types)
                var dataList = resp.data;
                for (let index = 0; index < types.length; index++) {
                    const typeItem = types[index];
                    var temp: any[] = []
                    for (let index = 0; index < dataList.length; index++) {
                        const dataItem = dataList[index];
                        if (dataItem.questionnaireType.toString() == typeItem.dictItemValue) {
                            temp.push(dataItem);
                        }
                    }
                    if (temp.length > 0) {
                        typeDataList.push({ 'name': typeItem['dictItemName'], "data": temp })
                    }
                }
                this.setState({ typeDataList: typeDataList })
            }
        })
    }

    onbackList() {
        Taro.navigateBack();
    }

    gotoWrongQuestion() {
        Taro.navigateTo({ url: '/xiaoyiAccExam/wrongQuestion/index' })
    }

    startAnswer(value) {
        Taro.preload(value);
        Taro.navigateTo({ url: '/xiaoyiAccExam/answer/index' })
        // Taro.navigateTo({url:'/xiaoyiAccExam/result/index'})
    }

    onPageScroll(e) {
        console.log(e.detail);
        if (e.detail.scrollTop < 50) {
            this.setState({
                navBackGroundColor: 'rgba(255, 0, 0,0)'
            })
        } else if (e.detail.scrollTop < 200) {
            // 计算滑动比例
            const ratio = Math.min(e.detail.scrollTop / 200, 1);
            const newBackgroundColor = `rgba(255, 255, 255, ${ratio})`;
            this.setState({
                navBackGroundColor: newBackgroundColor
            })
        } else {
            this.setState({
                navBackGroundColor: '#ffffff',
            })
        }
    }

    onScrollToUpper(e){
        console.log(e.detail);
        this.setState({
            navBackGroundColor: 'rgba(255, 0, 0,0)'
        })
    }


    render() {
        const { statusBarHeight } = Taro.getSystemInfoSync()
        const { typeDataList,navBackGroundColor } = this.state

        return (
            <View className='page'>
                <View className='nav' style={{ paddingTop: statusBarHeight, height: statusBarHeight + 44, backgroundColor: navBackGroundColor }}>
                    <View className='nav-back' onClick={() => this.onbackList()} >
                        {/* <Image src={require("@/assets/icons//public/nav_back_white.svg")} style='height:24px;width:24px;'></Image> */}
                        <IconFont name='nav_back_white' size={48} color={navBackGroundColor == 'rgba(255, 0, 0,0)' ? 'white' : 'black'}></IconFont>
                    </View>
                    <View className='nav_right' ></View>
                </View>
                <ScrollView className='context' scrollY
                    enhanced
                    onScroll={(detail) => this.onPageScroll(detail)} 
                    onScrollToUpper={(detail) => this.onScrollToUpper(detail) }
                    >
                    <Image className='poster' mode='widthFix' src={require('@/assets/images/xiaoyi-home-top.png')} style={{ height: 196 }}></Image>
                    <View className='b-list'>
                        {
                            typeDataList.map((item, value) => {
                                return <View className='b-item'>
                                    <View className='title'>
                                        <View className='sq'></View>
                                        <Text>{item['name']}</Text>
                                    </View>
                                    <View className='s-list'>
                                        {
                                            item['data'].map((item, value) => {
                                                return <View className='s-item'>
                                                    <Text className='name'>{item['title']}</Text>
                                                    <View className='s-button' onClick={(e) => this.startAnswer(item)}>
                                                        <Text>开始</Text>
                                                        <Image src={require('@/assets/icons/public/public_arrow_right.svg')}></Image>
                                                    </View>
                                                </View>
                                            })
                                        }
                                    </View>
                                </View>
                            })
                        }
                    </View>
                </ScrollView>
                <View className='bottom'>
                    <Button onClick={this.gotoWrongQuestion.bind(this)}>错题本</Button>
                </View>
            </View>
        );
    }
}
export default XiaoYiAccExam;